<script
	lang="ts"
	setup
>
import { productApplyListGet, productIdDelete,productStatusPut } from '@/api'
import FullHeightTable from '@/components/FullHeightTable.vue'
import { useRenderAction } from '@/hooks/useRenderActions'
import { productApplyColumns } from '@/tableColumns/productApply'
import ProductApplyStatusSelector from '@/components/ProductApplyStatusSelector.vue'
import ProductApplyImportantLevelSelector from '@/components/ProductApplyImportantLevelSelector.vue'
import InstallmentAppalyDetail from '@/views/console/product/components/InstallmentAppalyDetail.vue'
import UpdateImportantLevel from '@/views/console/product/components/UpdateImportantLevel.vue'
import { Add12Regular } from '@vicons/fluent'
import type {IProductStatusPut} from '@/typed/request'
import { type DataTableProps, NIcon } from 'naive-ui'
import { useRouter } from 'vue-router'
const router = useRouter()
import { ref } from 'vue'

const table = ref()
const filterPrams = ref({
	keyword: '',
	status:'',
    importantLevel:null
})
const currentItem = ref<any>({})
const showAddModal = ref<boolean>(false)
let showInstallmentDetail = ref<boolean>(false)
let installmentPriceList = ref<any>(null)
let installment = ref<any>(null)
const columnsCopy = [...(productApplyColumns || [])];
const installmentColumn = {
    title: '分期数',
    key: 'installment',
    width: 120,
    render: (row: any) => {
        return h('span', {
            style: { color: '#409EFF', cursor: 'pointer' },
            onClick: () => onShowInstallmentDetail(row)
        }, row.installment + '期');
    }
};

columnsCopy.splice(6, 0, installmentColumn);

columnsCopy.push({
    title: '操作',
    key: 'actions',
    width: 140,
    fixed: 'right',
    align: 'center',
    render: (item: any) => {
        return useRenderAction([
            {
                label: '备注等级',
                type: 'primary',
                round: true,
                size: 'small',
                onClick: () => onImportantLevelEdit(item)
            }
        ]);
    }
});



const tableProps = ref<DataTableProps>({
	scrollX: 1200,
	rowKey: (item) => item.id,
    columns: columnsCopy
})

function onShowInstallmentDetail(row) {
    installmentPriceList = row.installmentPrice;
    installment = row.installment;
    showInstallmentDetail.value = true
}

function onImportantLevelEdit(item: any) {
    currentItem.value = item;
    showAddModal.value = true
}


function reloadTable() {
	showAddModal.value = false
	table.value.reload();
}



</script>

<template>

	<n-layout>
		<sub-header>
			<template #right>
				<ProductApplyStatusSelector v-model:value="filterPrams.status"/>
				<ProductApplyImportantLevelSelector v-model:value="filterPrams.importantLevel"/>

				<SearchInput
					v-model:value="filterPrams.keyword"
					placeholder="商品标题/商品编号/用户名称/用户编号/手机号"
					width="410"
				/>
			</template>
		</sub-header>
		<n-layout class="content">
			<FullHeightTable
				ref="table"
				:params="filterPrams"
				:table-props="tableProps"
				:table-request="productApplyListGet"
			/>
		</n-layout>
		<ProductDetail
			v-model:show="showDetail"
			:id="productId || 0"
			@update:list="reloadTable"
		/>
		<AddTenant
			v-model:show="showAddModal"
			:data="currentItem"
			@update:list="reloadTable"
		/>
		<ResetPassword
			v-model:show="showResetModal"
			:data="currentResetUser"
			@update:list="reloadTable"
		/>


		<InstallmentAppalyDetail
				v-model:show="showInstallmentDetail"
				:installmentPriceList="installmentPriceList"
				:installment = "installment"
				@update:list="reloadTable"
		/>

		<UpdateImportantLevel
				v-model:show="showAddModal"
				:data="currentItem"
				@update:list="reloadTable"
		/>



	</n-layout>
</template>
<style
	lang="less"
	scoped
>
.content {
	padding: 0 20px 20px 20px;

	header {
		padding: 20px 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}
</style>
